<template>
    <div class="detail-container">

        <!-- 退换货信息-->
        <el-card shadow="never" class="standard-margin">
            <span class="font-title-medium">退换货信息</span>
            <el-table
                    border
                    class="standard-margin" width="900"
                    ref="productTable"
                    :data="orderReturnApply.itemList">
                <el-table-column label="退换货类型" width="130" align="center">
                    <template slot-scope="scope">
                        {{orderReturnApply.type| formatType}}
                    </template>
                </el-table-column>
                <el-table-column label="商品图片" width="130" align="center">
                    <template slot-scope="scope">
                        <img style="height:80px" :src="scope.row.imageUrl">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="160" align="center">
                    <template slot-scope="scope">
                        <span class="font-small">{{scope.row.name}}</span><br>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号" width="100" align="center">
                    <template slot-scope="scope">
                        <span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
                        <span class="font-small">货号：NO.{{scope.row.productId}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="属性" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.productAttr}}</template>
                </el-table-column>
                <el-table-column label="数量" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.nums}}</template>
                </el-table-column>
                <el-table-column label="收货信息" width="300" align="center">
                    <template slot-scope="scope">{{orderReturnApply.linkMan}}，{{orderReturnApply.address}}，{{orderReturnApply.linkPhone}}</template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 服务单信息-->
        <el-card shadow="never" class="standard-margin">
            <span class="font-title-medium">服务单信息</span>
            <div class="form-container-border">
                <el-row>
                    <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.aftersalesSn}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="form-border form-left-bg font-small">售后类型</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.type| formatType}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">退换货状态</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.aftersalesStatus |
                        formatAftersalesStatus}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">退款状态</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.refundStatus |
                        formatRefundStatus}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.ctime | formatTime}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.linkMan}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.linkPhone}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">退换货原因</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
                    <el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">
                        凭证图片
                    </el-col>
                    <el-col class="form-border font-small" :span="18" style="height:100px">
                        <img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 退换货操作记录-->
        <el-card shadow="never" class="standard-margin">
            <span class="font-title-medium">退换货操作记录</span>
            <el-table
                    border
                    class="standard-margin"
                    ref="productTable"
                    :data="this.operateHistoryListData">
                <el-table-column label="操作者" width="160" align="center">
                    <template slot-scope="scope">
                        {{scope.row.operateMan}}
                    </template>
                </el-table-column>
                <el-table-column label="操作时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.createTime|formatTime}}
                    </template>
                </el-table-column>
                <el-table-column label="原售后状态" width="180" align="center">
                    <template slot-scope="scope">
                        {{scope.row.preStatus|formatAftersalesStatus}}
                    </template>
                </el-table-column>
                <el-table-column label="售后状态" width="180" align="center">
                    <template slot-scope="scope">{{scope.row.aftersalesStatus|formatAftersalesStatus}}</template>
                </el-table-column>
                <el-table-column label="备注" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.note}}</template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
    import {getBillAftersalesDetail, operateHistoryList} from '@/api/returnApply';

    import {formatDate} from '@/utils/date';

    const aftersalesStatusOptions = [
        {
            label: '待平台审核',
            value: 0
        },
        {
            label: '平台已拒绝',
            value: 1
        },
        {
            label: '待买家发货',
            value: 2
        },
        {
            label: '买家已发货',
            value: 3
        },
        {
            label: '商家已收货',
            value: 4
        },
        {
            label: '商家已发货',
            value: 5
        },
        {
            label: '买家已收货',
            value: 6
        }
    ];
    export default {
        name: 'returnApplyDetail',
        data() {
            return {
                operateHistoryListData: [],
                id: null,
                orderReturnApply: {},
                productList: null,
                proofPics: null,
                listQuery: {
                    keyword: null,
                    pageNum: 1,
                    pageSize: 10
                },
                companyAddressList: null
            }
        },
        created() {
            this.id = this.$route.query.id;
            this.getDetail();
            this.operateHistoryList();
        },
        computed: {
        },
        filters: {
            formatStatus(status) {
                if (status === 0) {
                    return "待处理";
                } else if (status === 1) {
                    return "退货中";
                } else if (status === 2) {
                    return "已完成";
                } else {
                    return "已拒绝";
                }
            },
            formatAftersalesStatus(aftersalesStatus) {
                for (let i = 0; i < aftersalesStatusOptions.length; i++) {
                    if (aftersalesStatus === aftersalesStatusOptions[i].value) {
                        return aftersalesStatusOptions[i].label;
                    }
                }
            },
            formatRefundStatus(status) {
                if (status === 1) {
                    return "未退款";
                } else if (status === 2) {
                    return "已退款";
                } else if (status === 3) {
                    return "退款失败";
                }
            },

            formatTime(time) {
                if (time == null || time === '') {
                    return 'N/A';
                }
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
            formatType(type) {
                if (type === 2) {
                    return "退货"
                }
                if (type === 3) {
                    return "换货"
                }
            }
        },
        methods: {
            handleViewOrder() {
                this.$router.push({path: '/oms/orderDetail', query: {id: this.orderReturnApply.omsOrder.id}});
            },
            getDetail() {
                getBillAftersalesDetail(this.id).then(response => {
                    console.log("getDetail")
                    this.orderReturnApply = response.data;
                    if (this.orderReturnApply.proofPics != null) {
                        this.proofPics = this.orderReturnApply.proofPics.split(",")
                    }
                });
            },
            operateHistoryList() {
                operateHistoryList({aftersalesId: this.id}).then(response => {
                    this.operateHistoryListData = response.data;
                });
            },
        }
    }
</script>
<style scoped>
    .detail-container {
        position: absolute;
        left: 0;
        right: 0;
        width: 1080px;
        padding: 35px 35px 15px 35px;
        margin: 20px auto;
    }

    .standard-margin {
        margin-top: 15px;
    }

    .form-border {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
    }

    .form-container-border {
        border-left: 1px solid #DCDFE6;
        border-top: 1px solid #DCDFE6;
        margin-top: 15px;
    }

    .form-left-bg {
        background: #F2F6FC;
    }
</style>


